import { useState, useRef, useEffect } from 'react';
import { Download, FileText, FileSpreadsheet, File, Code, Type } from 'lucide-react';

interface ExportOptionsProps {
  onExport: (format: string) => void;
}

export default function ExportOptions({ onExport }: ExportOptionsProps) {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  
  // 点击外部关闭下拉菜单
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
  
  const handleFormatSelect = (format: string) => {
    onExport(format);
    setIsOpen(false);
  };
  
  return (
    <div className="relative" ref={dropdownRef}>
      <button 
        className="flex items-center text-sm text-gray-700 hover:text-blue-600"
        onClick={toggleDropdown}
      >
        <Download className="w-4 h-4 mr-1" />
        导出
      </button>
      
      {isOpen && (
        <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-10">
          <div className="py-1">
            <button
              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
              onClick={() => handleFormatSelect('txt')}
            >
              <FileText className="w-4 h-4 mr-3 text-gray-500" />
              文本文件 (.txt)
            </button>
            <button
              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
              onClick={() => handleFormatSelect('docx')}
            >
              <File className="w-4 h-4 mr-3 text-gray-500" />
              Word文档 (.docx)
            </button>
            <button
              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
              onClick={() => handleFormatSelect('csv')}
            >
              <FileSpreadsheet className="w-4 h-4 mr-3 text-gray-500" />
              表格文件 (.csv)
            </button>
            <button
              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
              onClick={() => handleFormatSelect('json')}
            >
              <Code className="w-4 h-4 mr-3 text-gray-500" />
              JSON格式 (.json)
            </button>
            <button
              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
              onClick={() => handleFormatSelect('md')}
            >
              <Type className="w-4 h-4 mr-3 text-gray-500" />
              Markdown (.md)
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
